<template>
    <el-dialog :visible.sync="dialogTableVisible" width="80vw" title="DAG任务运行详情">
      <el-table :data="detailList" style="width: 100%">
        <el-table-column prop="task_id" label="TASK_ID" width="100px"> </el-table-column>
        <el-table-column prop="task_name" label="作业名称" > </el-table-column>
        <el-table-column prop="operator" label="作业类型"> </el-table-column>
        <el-table-column prop="execution_date" label="计划时间">
          <template slot-scope="scope">
            {{ scope.row.execution_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="start_date" label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.start_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="end_date" label="结束时间">
          <template slot-scope="scope">
            {{ scope.row.end_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="Yarn 任务ID">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.app_proxy_url"
              :href="scope.row.app_proxy_url"
              type="primary"
              target="_blank"
              >{{ scope.row.application_id }}</el-link
            >
            <span v-else>{{ scope.row.application_id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="耗时"  width="80px"> </el-table-column>
        <el-table-column prop="state" label="状态"  width="120px"> 
          <template slot-scope="scope">
            <span class="state" :class="scope.row.state">
              {{ scope.row.state }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.driver_proxy_url"
              :href="scope.row.driver_proxy_url"
              type="primary"
              target="_blank"
              >Driver 日志
            </el-link>
            
            <el-link type="primary" @click="downloadLog(scope.$index, scope.row)">pod 日志</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>

</template>
<script>
export default {
  name: "TaskDetial",
  data() {
    return {
      dialogTableVisible: false,
      detailList: []
    }
  },
  methods: {
    showDetail(row) {
      this.$http.manageworkflow
        .getDetailList({
          dag_id: row.dag_id,
          execution_date: row.execution_date,
          project_id: this.$route.query.project_id
        })
        .then(res => {
          this.detailList = res;
          this.dialogTableVisible = true;
        });
    },
    downloadLog(index, row) {
      this.$http.task
        .downloadTaskLog({
          hostname: row.hostname,
          operator: row.operator,
          start: -1000
        })
        .then(res => {
          const blob = new Blob([res], { type: "application/octet-stream" });
          let dom = document.createElement("a");
          let url = window.URL.createObjectURL(blob);
          dom.href = url;
          dom.download = decodeURI(row.hostname + ".log");
          dom.style.display = "none";
          document.body.appendChild(dom);
          dom.click();
          dom.parentNode.removeChild(dom);
          window.URL.revokeObjectURL(url);
        });
    }
    // downLoad(row) {
    //   this.$http.task.downloadTaskLog({ hostname: row.hostname }).then(res => {
    //     const blob = new Blob([res], { type: "application/octet-stream" });
    //     let dom = document.createElement("a");
    //     let url = window.URL.createObjectURL(blob);
    //     dom.href = url;
    //     dom.download = decodeURI(row.hostname + ".log");
    //     dom.style.display = "none";
    //     document.body.appendChild(dom);
    //     dom.click();
    //     dom.parentNode.removeChild(dom);
    //     window.URL.revokeObjectURL(url);
    //   });
      
    }
  }

</script>

<style lang="scss" scoped>
.state{
  display: inline-block;
  text-align: center;
  height: 25px;
  border-radius: 15%;
  color: white;
  &.failed{
    width: 50px;
    background:#CC3366;
  }
  &.success{
    width: 60px;
    background:#00CC33;
  }
  &.shutdown{
    width: 65px;
    background:#990099;
  }
  &.running{
    width: 65px;
    background:#3366FF;
  }
  &.queued{
    width: 60px;
    background:gray;
  }
  &.up_for_retry{
    width: 100px;
    background: gold;
  }
  &.up_for_reschedule{
    width: 120px;
    background: turquoise;
  }
  &.upstream_failed{
    width: 120px;
    background: orange;
  }
  &.skipped{
    width: 65px;
    background: pink;
  }
  &.removed{
    width: 65px;
    background: lightgrey;
  }
  &.scheduled{
    width: 70px;
    background: tan;
  }
  &.none{
    width: 60px;
    background: lightblue;
  }
  &.sensing{
    width: 70px;
    background: lightseagreen;
  }
}
</style>